<script lang="ts" setup>
import type { UploadProps, UploadUserFile } from 'element-plus'

const { modelValue, accept } = defineModels<{
  modelValue: UploadUserFile[]
  accept: string
}>()

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  dialog.toast(
    `文件数量超过上限，您选择了 ${files.length} 个文件，合计 ${
      files.length + uploadFiles.length
    } 个文件`,
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile) => {
  return dialog.confirm(`确定要删除文件 ${uploadFile.name} 吗?`).then(
    () => true,
    () => false,
  )
}

function itemRemove(file: UploadUserFile) {
  dialog.confirm(`确定要删除文件 ${file.name} 吗?`).then(
    () => {
      const index = modelValue.value.findIndex((item: UploadUserFile) => item.name === file.name)
      modelValue.value.splice(index, 1)
    },
    () => false,
  )
}
</script>

<template>
  <Uploader
    v-model:file-list="modelValue"
    class="w-full flex flex-col bg-background text-center"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
    :accept="accept"
    :public-access="false"
  >
    <template #default>
      <slot name="default">
        <div
          class="w-full flex flex-col items-center gap-2 border rounded-lg border-dashed py-3 hover:border-primary hover:bg-primary/12"
        >
          <div class="i-carbon-cloud-upload bg-primary text-xl" />
          <div class="font-medium"> 点击或拖动文件到此处上传 </div>
          <div class="text-sm text-secondary-foreground"> 请选择PDF文件。 </div>
        </div>
      </slot>
    </template>
    <template #tip>
      <div
        v-if="modelValue.length"
        class="mt-2 flex items-center gap-2 rounded-lg bg-muted px-4 py-2 text-left"
      >
        <div class="w-[35%]"> 文件名 </div>
        <div class="w-[20%]"> 文件上传进度 </div>
        <div class="w-[20%]"> 文件大小 </div>
        <div class="flex-1"> 操作 </div>
      </div>
    </template>
    <template #file="{ file }">
      <div class="flex items-center gap-2 px-4 py-2 text-left">
        <div class="w-[35%] flex items-center gap-2">
          <div class="i-carbon-document-pdf" />
          <div>
            {{ file.name }}
          </div>
        </div>
        <div class="w-[20%]">
          <el-progress
            class="max-w-[15%]"
            :text-inside="true"
            status="success"
            :stroke-width="15"
            :duration="10"
            striped
            striped-flow
            :percentage="file.percentage"
          />
        </div>
        <div class="w-[20%]">
          {{ file.size }}
        </div>
        <div class="flex-1">
          <el-button plain>
            <template #icon>
              <div class="i-carbon-view" />
            </template>
          </el-button>
          <el-button type="danger" plain @click="itemRemove(file)">
            <template #icon>
              <div class="i-carbon-trash-can" />
            </template>
          </el-button>
        </div>
      </div>
    </template>
  </Uploader>
</template>
